<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:replace="base::head(~{})"></head>
<body class="layui-anim layui-anim-up">
	<div class="x-nav">
		<span class="layui-breadcrumb">
			<a href="#">首页</a>
			<a>
				<cite th:text="${title}"></cite>
			</a>
		</span>
	</div>
	<div class="x-body">
		<div class="layui-row">
			<form class="layui-form">
				<div class="layui-form-item">
					<div class="layui-input-inline">
						<input type="text" id="nameZh" name="nameZh" placeholder="请输入角色名称" autocomplete="off" class="layui-input">
					</div>
					<div class="layui-input-inline">
						<input type="text" class="layui-input" id="createTimeBegin" placeholder="创建日期(开始)">
					</div>
					<div class="layui-input-inline">
						<input type="text" class="layui-input" id="createTimeEnd" placeholder="创建日期(结束)">
					</div>
					<button type="reset" class="layui-btn">重置</button>
					<button class="layui-btn" lay-submit="" lay-filter="search">搜索</button>
				</div>
			</form>
		</div>
		<table class="layui-hide" id="table" lay-filter="table"></table>
	</div>
</body>
<script type="text/html" id="toolbarOpt">
	<div class="layui-inline" lay-event="add"><i class="layui-icon layui-icon-add-1"></i></div>
	<div class="layui-inline" lay-event="delete"><i class="layui-icon layui-icon-delete"></i></div>
</script>
<script type="text/html" id="lineOpt">
	<a class="layui-btn layui-btn-xs" lay-event="permission">权限配置</a>
	<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
	<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="statusTemp">
	{{# if(d.status == 0){ }}
      <input type="checkbox" checked="" name="status" value="{{ d.id }}" lay-skin="switch"  lay-filter="status" lay-text="启用|禁用">
  	{{# }else{ }}
      <input type="checkbox" name="status" value="{{ d.id }}" lay-skin="switch" lay-filter="status" lay-text="启用|禁用" >
	{{# } }}
</script>
<script th:inline="javascript">
	var getParams = function() {
		var data = {
			nameZh : $('#nameZh').val(),
			createTimeBegin : $('#createTimeBegin').val(),
			createTimeEnd : $('#createTimeEnd').val()
		}
		return data;
	}
	layui.use([ 'form', 'laydate', 'table' ], function() {
		var form = layui.form, laydate = layui.laydate, table = layui.table
		//表格 laydate
		//日期 table
		//加载日期时间选择器
		laydate.render({
			elem : '#createTimeBegin',
			type : 'datetime'
		});
		laydate.render({
			elem : '#createTimeEnd',
			type : 'datetime'
		});

		//执行一个table实例
		var currPage = 1;
		var tableList = table.render({
			elem : '#table',
			url : ctxPath + '/system/role/paging', //数据接口
			where : getParams(),
			title : '系统权限',//定义 table 的大标题（在文件导出等地方会用到）
			page : true,//开启分页
			toolbar : '#toolbarOpt',//开启工具栏
			defaultToolbar : [ 'filter' ],
			limits : [ 10, 50, 100 ],//每页条数的选择项，
			even : true,//隔行背景
			text : {
				none : '暂无相关数据' //默认：无数据。
			},
			cols : [ [ //表头
			{type : 'checkbox', fixed : 'left'}, 
			{field : 'nameZh', title : '角色名称', width : 150}, 
			{field : 'comment', title : '说明', width : 250}, 
			{field : 'status', title : '状态', width : 100, templet : '#statusTemp'}, 
			{field : 'createTime', title : '创建时间', width : 200}, 
			{fixed : 'right', title : '操作', width : 250, align : 'center', toolbar : '#lineOpt'} 
			] ],
			request : {
				pageName : 'pageNumber', //页码的参数名称，默认：page
				limitName : 'pageSize' //每页数据量的参数名，默认：limit
			},
			done : function(res, curr, count) {
				//获取删除后重载页码
				if (res.data.length == 1) {
					currPage = curr - 1;
				} else {
					currPage = curr;
				}
			}
		});
		//监听行数据事件
		table.on('tool(table)', function(obj) {
			//注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
			var data = obj.data; //获得当前行数据
			var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
			var tr = obj.tr; //获得当前行 tr 的DOM对象
			var id = data.id;
			switch (layEvent) {
			case 'detail':
				admin_medium_window('查看', ctxPath + '/system/role/detail?id=' + id);
				break;
			case 'del':
				admin_del_data(id, ctxPath + '/system/role/delete', currPage);
				break;
			case 'edit':
				admin_medium_window('编辑', ctxPath + '/system/role/toEdit?id=' + id);
				break;
			case 'permission':
				//var data = {};
				//data.roleId = id;
				admin_small_window('权限配置', ctxPath + '/system/resource/toAssign?roleId=' + id);
				break;
			}
		});
		//监听头部工具栏事件
		table.on('toolbar(table)', function(obj) {
			var checkStatus = table.checkStatus(obj.config.id);
			switch (obj.event) {
			case 'add':
				admin_medium_window('新增', ctxPath + '/system/role/toAdd');
				break;
			case 'delete':
				var data = checkStatus.data;
				var ids = new Array()
				$.each(data, function(index, item) {
					ids[index] = item.id;
				});
				admin_del_data(ids, ctxPath + '/system/role/delete');
				break;
			}
		});
		//监听提交
		form.on('submit(search)', function(data) {
			table.reload('table', {
				page : {curr : currPage},
				where : getParams()
			//设定异步数据接口的额外参数
			});
			return false;
		});
		//监听指定开关
		form.on('switch(status)', function(data) {
			var id = data.value;
			var status;
			if (this.checked) {
				status = 0;
			} else {
				status = 1;
			}
			$.ajax({
				type : 'POST',
				url : ctxPath + '/system/role/updateStatus',
				cache : false, //禁用缓存
				data : {
					id : id,
					status : status
				},
				success : function(result) {
					if (result.code == 0) {
						layer.msg('设置成功', {
							icon : 1
						})
						return;
					} else {
						//设置失败，还原开关状态
						layer.msg('设置失败。错误信息：' + result.msg, {
							icon : 2
						});
						if (status == 0) {
							$(data.elem).prop('checked', false);
						} else {
							$(data.elem).prop('checked', true);
						}
						form.render('checkbox');
						return;
					}
				},
				error : function(XMLHttpRequest, textStatus, errorThrown) {
					layer.msg('设置失败', {
						icon : 2
					});
					if (status == 0) {
						$(data.elem).prop('checked', false);
					} else {
						$(data.elem).prop('checked', true);
					}
					form.render('checkbox');
				}
			});
		});
	});
</script>
</html>